<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="mb-8">
      <h1 class="text-2xl font-bold">鲜花商城</h1>
      <p class="text-gray-600">精选优质鲜花，多种场景满足您的需求</p>
    </div>

    <!-- 筛选条件 -->
    <div class="bg-white rounded-lg shadow-md p-4 mb-8">
      <div class="space-y-4">
        <!-- 花材分类 -->
        <div class="flex items-center space-x-4">
          <span class="text-gray-600 w-20">花材：</span>
          <el-radio-group v-model="query.classifyId" size="small">
            <el-radio-button value="all">全部</el-radio-button>
            <el-radio-button v-for="item in classify" :key="item.value" :value="item.value">{{
                item.name
              }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 场景分类 -->
        <div class="flex items-center space-x-4">
          <span class="text-gray-600 w-20">场景：</span>
          <el-radio-group v-model="query.scenario" size="small">
            <el-radio-button value="all">全部</el-radio-button>
            <el-radio-button value="表白求婚">表白求婚</el-radio-button>
            <el-radio-button value="生日祝福">生日祝福</el-radio-button>
            <el-radio-button value="母亲节">母亲节</el-radio-button>
            <el-radio-button value="教师节">教师节</el-radio-button>
            <el-radio-button value="毕业季">毕业季</el-radio-button>
          </el-radio-group>
        </div>

        <!-- 价格区间 -->
        <div class="flex items-center space-x-4">
          <span class="text-gray-600 w-20">价格：</span>
          <el-radio-group v-model="query.priceRange" size="small">
            <el-radio-button value="all">全部</el-radio-button>
            <el-radio-button value="0-199">¥0-199</el-radio-button>
            <el-radio-button value="200-399">¥200-399</el-radio-button>
            <el-radio-button value="400-599">¥400-599</el-radio-button>
            <el-radio-button value="600-9999">¥600以上</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 排序工具栏 -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center space-x-4">
        <el-radio-group v-model="sort" size="small">
          <el-radio-button value="default">默认排序</el-radio-button>
          <el-radio-button value="sales">销量优先</el-radio-button>
          <el-radio-button value="price-asc">价格从低到高</el-radio-button>
          <el-radio-button value="price-desc">价格从高到低</el-radio-button>
        </el-radio-group>
      </div>
      <div class="flex items-center space-x-2">
        <span class="text-gray-600">共 {{ total }} 个商品</span>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <FlowerCard
          v-for="product in products"
          :key="product.id"
          :flower="product"
      />
    </div>

    <!-- 分页器 -->
    <div class="flex justify-center mt-8">
      <el-pagination
          v-model:current-page="query.page"
          v-model:page-size="query.size"
          :page-sizes="[12, 24, 36, 48]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!-- 无数据提示 -->
    <div
        v-if="products.length === 0"
        class="text-center py-12"
    >
      <el-empty description="暂无相关商品"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import FlowerCard from '@/components/common/FlowerCard.vue'
import {getClassify, getProducts} from "@/api/products.js";

const route = useRoute()

const query = ref({
  page: 1,
  size: 12,
  classifyId: 'all',
  priceRange: 'all',
  scenario: 'all',
})

const getList = async () => {
  const {data: productsData} = await getProducts(query.value)
  products.value = productsData.list
  total.value = productsData.total
}
const total = ref(0)
const classify = ref([])
onMounted(async () => {
  await getList();
  const {data} = await getClassify()
  classify.value = data.map((item) => {
    return {
      name: item.name,
      value: item.id
    }
  })
})

// 排序方式
const sort = ref('default')

// 商品数据
const products = ref([])

// 分页处理函数
const handleSizeChange = (val) => {
  query.value.size = val
  query.value.page = 1  // 重置到第一页
  scrollToTop()
}

const handleCurrentChange = (val) => {
  query.value.page = val
  scrollToTop()
}

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 监听筛选条件变化，重置分页
watch([query], () => {
  getList()
}, {deep: true})
</script>

<style scoped>
/* 分页器样式 */
.el-pagination {
  --el-pagination-button-bg-color: white;
  --el-pagination-hover-color: var(--el-color-primary);
}

@media (max-width: 768px) {
  .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}
</style>
